<template>
  <div class="grid items-center gap-4 mb-4">
    <Label for="bot-token">
      {{ t("Bot Token") }}
    </Label>
    <div class="relative">
      <Input
        id="bot-token"
        v-model="pageData.telegramBotToken"
        @change="updateValueFn"
        autocomplete="new-password"
        :type="isPasswordVisible ? 'text' : 'password'"
      />
      <div
        class="absolute inset-y-0 top-0 right-0 flex items-center pr-3 h-10 cursor-pointer select-none"
        @click="togglePasswordFn"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          v-show="!isPasswordVisible"
        >
          <path
            fill="currentColor"
            d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          v-show="isPasswordVisible"
        >
          <path
            fill="currentColor"
            d="M2 5.27L3.28 4L20 20.72L18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58c-5 0-9.27-3.11-11-7.5c.69-1.76 1.79-3.31 3.19-4.54zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-.17 1L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.79 11.79 0 0 1-4 5.19l-1.42-1.43A9.862 9.862 0 0 0 20.82 12A9.821 9.821 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.821 9.821 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13"
          />
        </svg>
      </div>
    </div>
    <Translation
      tag="p"
      keypath="wayToGetTelegramToken"
      class="text-xs opacity-85 -mt-2"
    >
      <a
        href="https://t.me/BotFather"
        target="_blank"
        class="break-words underline hover:text-primary"
        >https://t.me/BotFather</a
      >
    </Translation>
    <!-- <p class="text-xs opacity-85 -mt-2">{{ t('wayToGetTelegramToken') }}<a href="https://t.me/BotFather" target="_blank" class="break-words underline hover:text-primary">https://t.me/BotFather</a></p> -->
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="chat-id">
      {{ t("Chat ID") }}
    </Label>
    <Input
      id="chat-id"
      v-model="pageData.telegramChatID"
      @change="updateValueFn"
      required
    />
    <Button v-show="pageData.telegramBotToken" @click="autoGetTelegramChatID">{{
      t("Auto Get")
    }}</Button>
  </div>
  <div class="mb-4">
    <p class="text-xs opacity-85">{{ t("supportTelegramChatID") }}</p>
    <p class="text-xs opacity-85 mt-2">{{ t("wayToGetTelegramChatID") }}</p>
    <p class="text-xs opacity-85 mt-0">
      <a :href="telegramGetUpdatesURL('withToken')" target="_blank" class="break-words underline hover:text-primary">{{ telegramGetUpdatesURL("masked") }}</a>
    </p>
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="message_thread_id">
      {{ t("telegramMessageThreadID") }}
    </Label>
    <Input
      id="message_thread_id"
      v-model="pageData.telegramMessageThreadID"
      @change="updateValueFn"
      required
    />
    <p class="text-xs opacity-85">
      {{ t("telegramMessageThreadIDDescription") }}
    </p>
  </div>
  <div class="flex items-center space-x-4 mb-0-4">
    <Switch
      id="silent-notification"
      v-model:checked="pageData.telegramSendSilently"
      @update:checked="updateValueFn"
    />
    <Label for="silent-notification">{{ t("telegramSendSilently") }}</Label>
  </div>
  <p class="text-xs opacity-85 mt-2 mb-4">
    {{ t("telegramSendSilentlyDescription") }}
  </p>
  <div class="flex items-center space-x-4">
    <Switch
      id="protect-notification"
      v-model:checked="pageData.telegramProtectContent"
      @update:checked="updateValueFn"
    />
    <Label for="protect-notification">{{ t("telegramProtectContent") }}</Label>
  </div>
  <p class="text-xs opacity-85 mt-2">
    {{ t("telegramProtectContentDescription") }}
  </p>
</template>

<script setup lang="ts">
import axios from "axios";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { useToast } from "@/components/ui/toast/use-toast";
import { ref } from "vue";
import { useI18n, Translation } from "vue-i18n";

const { t } = useI18n();
const { toast } = useToast();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      telegramBotToken: "",
      telegramChatID: "",
      telegramMessageThreadID: "",
      telegramSendSilently: false,
      telegramProtectContent: false,
    }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateValueFn = () => {
  emits("update", {
    telegramBotToken: pageData.value.telegramBotToken,
    telegramChatID: pageData.value.telegramChatID,
    telegramMessageThreadID: pageData.value.telegramMessageThreadID,
    telegramSendSilently: pageData.value.telegramSendSilently,
    telegramProtectContent: pageData.value.telegramProtectContent,
  });
};

const isPasswordVisible = ref(false);
const togglePasswordFn = () => {
  isPasswordVisible.value = !isPasswordVisible.value;
};

const telegramGetUpdatesURL = (mode = "masked") => {
  let token = `<${t("YOUR BOT TOKEN HERE")}>`;

  if (pageData.value.telegramBotToken) {
    if (mode === "withToken") {
      token = pageData.value.telegramBotToken;
    } else if (mode === "masked") {
      token = "*".repeat(pageData.value.telegramBotToken.length);
    }
  }

  return `https://api.telegram.org/bot${token}/getUpdates`;
};

const autoGetTelegramChatID = async () => {
  try {
    let res = await axios.get(telegramGetUpdatesURL("withToken"));

    if (res.data.result.length >= 1) {
      let update = res.data.result[res.data.result.length - 1];

      if (update.channel_post) {
        pageData.value.telegramChatID = update.channel_post.chat.id;
      } else if (update.message) {
        pageData.value.telegramChatID = update.message.chat.id;
      } else {
        // throw new Error(t("chatIDNotFound"));
        toast({
          description: t("chatIDNotFound"),
        });
      }
    } else {
      // throw new Error(t("chatIDNotFound"));
      toast({
        description: t("chatIDNotFound"),
      });
    }
  } catch (error: any) {
    toast({
      description: error.message,
    });
  }
};
</script>
